<template>
  <!-- 顶部导航栏 -->
  <header class="page-header" :style="{ background: bgColor }">
    <div class="back-container" @click="goBack">
      <van-icon name="arrow-left" class="back-icon" :style="{ color: backIconColor }"></van-icon>
      <span v-if="showBackText" class="back-text" :style="{ color: backIconColor }">{{ backText }}</span>
    </div>
    <h1 class="page-title" :style="{ color: titleColor }">{{ title || '页面标题' }}</h1>
    <div class="placeholder">
      {{ placeholderText }}
    </div>
  </header>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import type { PropType } from 'vue';

// 定义组件props
defineProps({
  title: {
    type: String as PropType<string>,
    default: '页面标题'
  },
  bgColor: {
    type: String as PropType<string>,
    default: '#FFFFFF'
  },
  showBackText: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  backText: {
    type: String as PropType<string>,
    default: '返回'
  },
  backIconColor: {
    type: String as PropType<string>,
    default: '#333333'
  },
  titleColor: {
    type: String as PropType<string>,
    default: '#000000'
  },
  placeholderText: {
    type: String as PropType<string>,
    default: ''
  }
});

const router = useRouter();

// 返回上一页
const goBack = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 16px;
  //   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .back-container {
    display: flex;
    align-items: center;
    cursor: pointer;

    .back-icon {
      width: 20px;
      height: 20px;
      font-size: 20px;
    }

    .back-text {
      margin-left: 4px;
      font-size: 16px;
    }
  }

  .page-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 19px;
    line-height: 20px;
  }

  .placeholder {
    padding-left: 20px;
    color: rgba(255, 255, 255, 0);
    /* 与返回图标的宽度相同，保持标题居中 */
    margin-left: 4px;
    font-size: 16px;
  }
}
</style>